<template>
    <div class="simpleSwipe" ref="wrap">
        <div class="ss_item_wrap" ref="test" @touchstart="touchdown(touchRelate)" @touchmove='touchmove(touchRelate)' @touchend="touchend">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        computed:{
            slots(){
                return [].filter.call(this.$slots.default,item=>{
                    return item.elm.nodeType !== 3 && item.elm.style.display !=="none"
                });
            },
            picNum(){
                return this.slots.length
            },
            stepWidth(){
                return this.slots[0].elm.offsetWidth
            }
        },
        props:['selected_'],
        data(){
            return{
                nowPage:0,
                touchRelate:{
                    x:"",xOrigin:"",moveDistance:"",
                }
            }
        },
        created(){
            this.$bus.on('touchend',this.backUP);
            this.$bus.on('touchdown',this.touchdown);
            this.$bus.on('touchmove',this.touchmove);
            this.nowPage = -this.selected_;
        },
        beforeDestroy(){
            this.$bus.off('touchdown',this.touchdown);
            this.$bus.off('touchmove',this.touchmove);
        },
        methods:{
            slidePic(){
                let event = window.event;
                event.currentTarget.style.left = this.stepWidth * this.nowPage + "px";
                event.currentTarget.style.transition = "left .4s ease";
            },
            touchdown(pos){
                let event = window.event;
                event.currentTarget.style.transition = "left 0s ease";
                pos.x = event.targetTouches[0].pageX;
                pos.xOrigin = event.currentTarget.offsetLeft;
                event.preventDefault();
            },
            touchmove(pos){
                this.$bus.emit('switchTriger',false);
                let event = window.event;
                /* let temp = event.currentTarget.offsetWidth - document.body.clientWidth; */
                let temp = event.currentTarget.offsetWidth - event.currentTarget.parentNode.clientWidth;
                pos.moveDistance = event.targetTouches[0].pageX - pos.x;
                event.currentTarget.style.left = pos.moveDistance + pos.xOrigin + "px";
                if(parseInt(event.currentTarget.offsetLeft)>0){
                    event.currentTarget.style.left = "0px";
                    this.nowPage = 0
                }
                if(parseInt(event.currentTarget.offsetLeft)<(-temp)){
                    event.currentTarget.style.left = (-temp + "px");
                    this.nowPage = -(this.picNum - 1 -parseInt(event.currentTarget.parentNode.clientWidth / this.stepWidth))
                }
            },
            touchend(pos){
                if(pos.moveDistance < -100){
                    this.nowPage--;
                    this.nowPage < -(this.picNum -1) ? this.nowPage = -(this.picNum -1):this.nowPage;
                    this.slidePic();
                    this.$emit('input',Math.abs(this.nowPage));
                }else if(pos.moveDistance > 100){
                    this.nowPage++;
                    this.nowPage > 0 ? this.nowPage = 0:this.nowPage;
                    this.slidePic();
                    this.$emit('input',Math.abs(this.nowPage));
                }else{
                    this.slidePic();
                }
                this.$bus.emit('switchTriger',true);
                this.clearPos();
            },
            backUP(){
                this.$bus.emit('switchTriger',true);
            },
            clearPos(){
                this.touchRelate.x = "";
                this.touchRelate.xOrigin = "";
                this.touchRelate.moveDistance = "";
            }
        },
        watch:{
            selected_(value){
                this.nowPage = -value;
                setTimeout(()=>{
                    let stepWidth = this.$slots.default[0].elm.offsetWidth;
                    this.$refs.test.style.left = stepWidth * this.nowPage + "px";
                    this.$refs.test.style.transition = "left .4s ease";
                },0)
            }
        }
    }
</script>